<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <title>图片上传</title>
    <style>
    body {
        margin: 0;
        padding: 0;
    }
    .iconbox{
        margin: 0;
        padding: 0;
    }
    .icon{
        float: left;
        margin: 0 10px 10px 0;
        width: 100px;
        height: 100px;
        text-align: center;
        overflow: hidden;
        border: 1px solid #CCC;
        line-height: 100px;
        position: relative;
    }
    .icon img{
        max-height:100px;
    } 
    .icon .remove{
        position: absolute;
        width: 40px;
        height: 20px;
        top: 0;
        right: 0;
        line-height: 20px;
        font-size: 12px;
        color: #FFF;
        background: #C00;
        cursor: pointer;
    }
    .file_box {
        display: inline-block;
        float: left;
        margin: 0 10px 10px 0;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #FFF;
        background: #3E4B5B;
        position: relative;
        overflow: hidden;
        margin: 0 0 10px 0;
    }
    .file_box:hover {
        color: #fff;
    }
    #uploadicon {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 100px;
        opacity: 0;
    }
	.c{clear:both;}
    </style>
    <script src="__STATIC__/admin/js/jquery.js" type="text/javascript"></script>
</head>

<body>
    <form enctype="multipart/form-data" id="PostMe" action="?" method="post" name="upform">
        <input type="hidden" value="{$url}" name="url" id="Img">
        <div class="iconbox">
			{volist name="images" id="val"}
                <div class="icon"><img class="iconimg" src="{$val}"><div class="remove">移除</div></div>
            {/volist}
            <a class="file_box">＋<input type="file" name="{$name}" id="uploadicon"  value="上传"/></a>
			<div class="c"></div>
        </div>
    </form>
    <script type="text/javascript">
        $('#uploadicon').on("change",function(){
            arrange();
            $('#PostMe').submit();
        });
        $('.remove').on("click",function(){
            $(this).parent().remove();
            arrange();
        });
        function arrange(){
            var url="";
            $('.iconimg').each(function(index){
                if(index!=0) url+='|';
                url+=$(this).attr('src');
            });
            $('#{$name}',parent.document).val(url);
            $('#Img').val(url);
        }

        $('#{$name}',parent.document).val("{$url}"); 
    </script>
</body>
</html>